<template>
  <el-card class="box-card" shadow="never">
    <EchartBar :width="500" :height="400" :options="option1"></EchartBar>
    <EchartLine :width="500" :height="400" :options="option2"></EchartLine>
    <EchartPie :width="500" :height="400" :options="option3"></EchartPie>
    <EchartRadar :width="500" :height="400" :options="option4"></EchartRadar>
  </el-card>
</template>

<script>
import { EchartBar, EchartLine, EchartPie, EchartRadar } from "_c/Echart";

export default {
  name: "echart_page",
  components: {
    EchartBar,
    EchartLine,
    EchartPie,
    EchartRadar
  },
  data() {
    return {
      option1: {
        title: { text: "柱状图" },
        tooltip: {},
        legend: {
          selectedMode: false, // 是否开启图例选择
          data: [{
            name: "销量",
            icon: "rect"
          }, "库存"]
        },
        xAxis: {
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          data: [{
            value: "衬衫",
            textStyle: {
              color: '#61A0A8'
            }
          }, "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          name: "衣物",
          axisTick: {
            show: false // 坐标轴刻度线
          }
        },
        yAxis: {
          max: function(value) {
            return value.max + 10;
          },
          axisTick: {
            show: false // 坐标轴刻度线
          },
          axisLine: {
            lineStyle: {
              color: "blue"
            }
          },
          splitLine: {
            lineStyle: {
              color: "green",
              type: "dotted"
            }
          }
        },
        series: [
          {
            name: "销量",
            type: "bar",
            barGap: '0',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: "库存",
            type: "bar",
            data: [50, 50, 50, 50, 50, 50]
          }
        ]
      },
      option2: {
        title: { text: "折线图" },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true
          }
        ]
      },
      option3: {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      option4: {
        title: {
          text: "基础雷达图"
        },
        tooltip: {},
        legend: {
          data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"]
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "销售（sales）", max: 6500 },
            { name: "管理（Administration）", max: 16000 },
            { name: "信息技术（Information Techology）", max: 30000 },
            { name: "客服（Customer Support）", max: 38000 },
            { name: "研发（Development）", max: 52000 },
            { name: "市场（Marketing）", max: 25000 }
          ]
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: "预算分配（Allocated Budget）"
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: "实际开销（Actual Spending）"
              }
            ]
          }
        ]
      }
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
</style>
